{extend name="other/public"}
{block name='css'}
  <style>
    .c1{width: 50px;height: 50px;}
    .layui-table .c2{text-align: center;}
    .c3{padding-left: 0;text-align: center;}
    .layui-form-label{width: auto;padding-left: 0;}
    .c4{float: right;margin-top: 3px;}
    .c5{padding:20px 20px 5px;}
    .c5 span{display: inline-block;margin-right: 10px;}
    .c6{margin-top: 15px;display: none;}
    .c6 .layui-form-label{width: 95px;}
  </style>
{/block}

{block name='content'}
<div class="layui-fluid" id="app" v-cloak>
  <div class="layui-card">
    <div class="layui-card-header">管理员列表</div>
    <div class="layui-form layui-card-header layuiadmin-card-header-auto"  lay-filter="anForm">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline" style="width:300px">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">角色类型</label>
          <div class="layui-input-inline">
            <select name="type">
              <option value="">请选择标签</option>
              {volist name="typeList" id="vo"}
                <option value="{$vo.id}">{$vo.role_name}</option>
              {/volist}
            </select>
          </div>
        </div>
        <button style="position: relative;top:-2px" class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search"> 搜索</button>
        <button style="position: relative;top:-2px" class="layui-btn layuiadmin-btn-list c4 layui-btn-danger">添加管理员</button>
      </div>
    </div>
    {if ( $search != '') OR ( $search_type != '') }
      <div class="c5">
        <span>筛选 ：</span>
        {notempty  name="search"}
          <button type="button" class="layui-btnlayui-btn-xs layui-btn-danger" @click="delSearch(1)">
            <i class="layui-icon">&#x1006;</i> 关键词 ：{$search}
          </button>
        {/notempty}
        {notempty  name="search_type"}
          <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" @click="delSearch(2)">
            <i class="layui-icon">&#x1006;</i> 
            分类 ：
            {volist name="typeList" id="vo"}
              {eq name="vo.id" value="$search_type"}{$vo.name}{/eq}
            {/volist}
          </button>
        {/notempty}
      </div>
    {/if}
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <table class="layui-table">
          <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col width="150">
            <col width="135">
          </colgroup>
          <thead>
            <tr>
              <th>昵称</th>
              <th>账号</th>
              <th>角色</th>
              <th class="c2">是否禁用</th>
              <th class="c2">更新时间</th>
              <th class="c2">操作</th>
            </tr> 
          </thead>
          <tbody v-if="listData.length > 0">
            <tr v-for="(v,index) in listData" :key="index">
              <td>{{v.name}}</td>
              <td>{{v.user}}</td>
              <td>{{v.role_name}}</td>
              <td class="c2">
                <input type="checkbox"  name="switch" lay-skin="switch"  lay-text="已发布|不发布" v-if="Number(v.disable) == 1" checked>
                <input type="checkbox"  name="switch" lay-skin="switch"  lay-text="已发布|不发布" v-else>
              </td>
              <td class="c2">{{v.up_time}}</td>
              <td>
                <button  type="button" class="layui-btn layui-btn-normal layui-btn-sm c7" @click="editAdmin(v)">编辑</button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" type="button" @click="delData(v,index)">删除</button>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="8" class="c2" style="line-height: 100px;">没有找到相关数据</td>
            </tr>
          </tbody>
        </table>
      </form>
      <div style="padding-top: 10px;">
        <div id="page"></div>
      </div>
    </div>
  </div>
  <div class="c6">
    <div class="layui-form" lay-filter="editAdmin">
      <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
          <select name="role_id" lay-verify="required">
            <option value=""></option>
            {volist name="typeList" id="vo"}
              <option value="{$vo.id}">{$vo.role_name}</option>
            {/volist}
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-inline">
          <input type="text" name="name" placeholder="请输入昵称" lay-verify="required" lay-verType="tips" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" v-if="!eidtID" >
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
          <input type="text" name="user" placeholder="请输入账号"  lay-verify="required"  lay-verType="tips" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input v-if="eidtID" type="text" name="pass" placeholder="不填写为不修改密码" class="layui-input">
          <input v-else type="text" name="pass" placeholder="请输入密码" lay-verify="required" lay-verType="tips" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">6到16个字符</div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="addUser">{{eidtID?'确认修改':'确认新增'}}</button>
          <button class="layui-btn c80">取消</button>
        </div>
      </div>
    </div>
  </div>
</div>

{/block}

{block name='js'}
<script>
  const listData = {$listData|raw};
  var admin = null;
  var form = null;
  const anVue = new Vue({
    el:"#app",
    data:{
      listData:listData,
      eidtID:null,
    },
    methods: {
      delSearch(type){
        if(type==1){
          location.href = "{:url('list_data')}?search_type={$search_type}&search="
        }else{
          location.href = "{:url('list_data')}?search_type=&search={$search}"
        }
      },
      delData(v,index){

        
        let _this = this;
        layer.msg('删除后将不能恢复', {
          time: 0 //不自动关闭
          ,btn: ['直接删除', '取消']
          ,yes: function(index){
            layer.close(index);
            $.post("{:url('admin_user')}?del=1",{id:v.id,user:v.user},(res)=>{
              if(res.code == 1){
                layer.msg('操作成功，即将刷新列表',{time: 1000},function(){
                  location.reload()
                })
              }else{
                layer.msg(res.msg)
              }
            },'json')
          }
        });
      },
      editAdmin(v){
        form.val("editAdmin", {
          "name":v.name,
          "user":v.user,
          "role_id":v.role_id,
          "pass":'',
        });

        this.eidtID = v.id;
        this.user = v.user;

        var adminPopup = admin.popup({
          title: '编辑管理员'
          ,anim: -1
          ,area: ['500px', '380px']
          ,id: 'layadmin-layer-skin-test'
          ,skin: 'layui-anim layui-anim-upbit'
          ,content: $(".c6"),
          success: function(layero, index){

          },
          end: function(index, layero){ 

          }   
        })
      }
    },
  })
  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','form','laypage'], function(){
    form = layui.form;
    var $ = layui.$;
    admin = layui.admin;

    //监听提交
    form.on('submit(search)', function(data){
      if(data.field.type != '' || data.field.title != ''){
        location.href = "{:url('list_data')}?search_type="+data.field.type+"&search="+data.field.title
        return false;
      }else{
        layer.msg('请操作需要筛选的类型')
      }
    });



    form.on('submit(addUser)', function(data){
      var url = "{:url('admin_user')}?add=1";

      if(anVue.$data.eidtID){
        data.field.id = anVue.$data.eidtID
        url = "{:url('admin_user')}?edit=1";
        if(data.field.pass == ''){
          delete data.field.pass;
        }
      }

      $.post(url,data.field,res=>{
        if(res.code == 1){
          layer.msg('操作成功，即将刷新列表',{time: 1000},function(){
            location.reload()
          })
        }else{
          layer.msg(res.msg)
        }
      },'json')
    });

    //表单初始化赋值
    form.val("anForm", {
      "type":"{$search_type}",
      "title":"{$search}"
    });

    const search_type = "{$search_type}";
    const search = "{$search}";

    $(".c4").click(function(){
      anVue.$data.eidtID = null
      form.val("editAdmin", {
        "name":'',
        "user":'',
        "role_id":null
      });
      var adminPopup = admin.popup({
        title: '添加管理员'
        ,anim: -1
        ,area: ['500px', '380px']
        ,id: 'layadmin-layer-skin-test'
        ,skin: 'layui-anim layui-anim-upbit'
        ,content: $(".c6"),
        success: function(layero, index){

        },
        end: function(index, layero){ 

        }   
      })
    })
    
    $(".c80").click(function(){
      layer.closeAll()
    })

    layui.use('laypage', function(){
      var laypage = layui.laypage;
      laypage.render({
        elem: 'page',
        limit:10,
        count:'{$totalNum}',
        jump: function(obj, first){
          if(!first){
            $.get("{:url('list_data')}",{get:1,page:obj.curr,search_type,search},(res)=>{
              if(res.code==1){
                anVue.$data.listData = res.data;
              }
            },'json')
          }
        }
      });
    });
  });
  </script>
{/block}